<html>
<head> 
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
    <title>记录仪记录时长计算</title> 

<script>
	var model_para = {
		'vx2300': {
			'name': 'VX2300',
			'memory': 2.0 * 1024 * 1024,
			'byte': 2,
			'channel': {
				'1': 4, '2': 4, '3': 4, '4': 4
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '5m': 5 * 60, '10m': 10 * 60, '30m': 30 * 60,
			},
		},
		'vxb2300': {
			'name': 'VXB2300',
			'memory': 10.0 * 1024 * 1024,
			'byte': 2,
			'channel': {
				'1': 1, '2': 2, '3': 4, '4': 4
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '5m': 5 * 60, '10m': 10 * 60, '30m': 30 * 60,
			},
		},
		'vxb2300_m032': {
			'name': 'VXB2300/M032',
			'memory': 26.0 * 1024 * 1024,
			'byte': 2,
			'channel': {
				'1': 1, '2': 2, '3': 4, '4': 4
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '5m': 5 * 60, '10m': 10 * 60, '30m': 30 * 60,
			},
		},
		'vx6300': {
			'name': 'VX6300',
			'memory': 6.0 * 1024 * 1024,
			'byte': 2,
			'channel': {
				'1': 6, '2': 6, '3': 6, '4': 6, '5': 6, '6': 6, '7': 12, '8': 12, '9': 12, '10': 12, '11': 12, '12': 12, '13': 16, '14': 16, '15': 16, '16': 16
			},
			// 按通道固定时长，单位：天
			'time_ch': {
				'1': 3, '2': 3, '3': 3, '4': 3, '5': 3, '6': 3, '7': 3, '8': 3, '9': 3, '10': 3, '11': 3, '12': 3, '13': 2.2, '14': 2.2, '15': 2.2, '16': 2.2
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '15s': 15, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '4m': 4 * 60, '10m': 10 * 60, '20m': 20 * 60, '30m': 30 * 60,
			},
		},
		'vxb6300': {
			'name': 'VXB6300',
			'memory': 10.5 * 1024 * 1024,
			'byte': 2,
			'channel': {
			'1': 1, '2': 2, '3': 4, '4': 4, '5': 6, '6': 6, '7': 8, '8': 8, '9': 12, '10': 12, '11': 12, '12': 12, '13': 16, '14': 16, '15': 16, '16': 16
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '15s': 15, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '4m': 4 * 60, '10m': 10 * 60, '20m': 20 * 60, '30m': 30 * 60,
			},
		},
		'vxb6300_m064': {
			'name': 'VXB6300/M064',
			'memory': 55.5 * 1024 * 1024,
			'byte': 2,
			'channel': {
			'1': 1, '2': 2, '3': 4, '4': 4, '5': 6, '6': 6, '7': 8, '8': 8, '9': 12, '10': 12, '11': 12, '12': 12, '13': 16, '14': 16, '15': 16, '16': 16
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '15s': 15, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '4m': 4 * 60, '10m': 10 * 60, '20m': 20 * 60, '30m': 30 * 60,
			},
		},
		'm70': {
			'name': 'M70',
			'memory': (256 - 128) * 1024 * 1024,
			'byte': 4,
			'channel': {
			'1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, '11': 11, '12': 12, '13': 13, '14': 14, '15': 15, '16': 16, 
			'17': 17, '18': 18, '19': 19, '20': 20, '21': 21, '22': 22, '23': 23, '24': 24, '25': 25, '26': 26, '27': 27, '28': 28, '29': 29, '30': 30, '31': 31, '32': 32, 
			'33': 33, '34': 34, '35': 35, '36': 36, '37': 37, '38': 38, '39': 39, '40': 40, '41': 41, '42': 42, '43': 43, '44': 44, '45': 45, '46': 46, '47': 47, '48': 48, 
			'49': 49, '50': 50, '51': 51, '52': 52, '53': 53, '54': 54, '55': 55, '56': 56, '57': 57, '58': 58, '59': 59, '60': 60, '61': 61, '62': 62, '63': 63, '64': 64, 
			'65': 65, '66': 66, '67': 67, '68': 68, '69': 69, '70': 70, '71': 71, '72': 72, '73': 73, '74': 74, '75': 75, '76': 76, '77': 77, '78': 78, '79': 79, '80': 80, 
			'81': 81, '82': 82, '83': 83, '84': 84, '85': 85, '86': 86, '87': 87, '88': 88, '89': 89, '90': 90, '91': 91, '92': 92, '93': 93, '94': 94, '95': 95, '96': 96, 
			'97': 97, '98': 98, '99': 99, '100': 100, '101': 101, '102': 102, '103': 103, '104': 104, '105': 105, '106': 106, '107': 107, '108': 108, 
			'109': 109, '110': 110, '111': 111, '112': 112, '113': 113, '114': 114, '115': 115, '116': 116, '117': 117, '118': 118, '119': 119, '120': 120, 
			'121': 121, '122': 122, '123': 123, '124': 124, '125': 125, '126': 126, '127': 127, '128': 128, 
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '15s': 15, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '4m': 4 * 60, '10m': 10 * 60, '20m': 20 * 60, '30m': 30 * 60,
			},
		},
		'm70_m1': {
			'name': 'M70/M1',
			'memory': (1024 - 128) * 1024 * 1024,
			'byte': 4,
			'channel': {
			'1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, '11': 11, '12': 12, '13': 13, '14': 14, '15': 15, '16': 16, 
			'17': 17, '18': 18, '19': 19, '20': 20, '21': 21, '22': 22, '23': 23, '24': 24, '25': 25, '26': 26, '27': 27, '28': 28, '29': 29, '30': 30, '31': 31, '32': 32, 
			'33': 33, '34': 34, '35': 35, '36': 36, '37': 37, '38': 38, '39': 39, '40': 40, '41': 41, '42': 42, '43': 43, '44': 44, '45': 45, '46': 46, '47': 47, '48': 48, 
			'49': 49, '50': 50, '51': 51, '52': 52, '53': 53, '54': 54, '55': 55, '56': 56, '57': 57, '58': 58, '59': 59, '60': 60, '61': 61, '62': 62, '63': 63, '64': 64, 
			'65': 65, '66': 66, '67': 67, '68': 68, '69': 69, '70': 70, '71': 71, '72': 72, '73': 73, '74': 74, '75': 75, '76': 76, '77': 77, '78': 78, '79': 79, '80': 80, 
			'81': 81, '82': 82, '83': 83, '84': 84, '85': 85, '86': 86, '87': 87, '88': 88, '89': 89, '90': 90, '91': 91, '92': 92, '93': 93, '94': 94, '95': 95, '96': 96, 
			'97': 97, '98': 98, '99': 99, '100': 100, '101': 101, '102': 102, '103': 103, '104': 104, '105': 105, '106': 106, '107': 107, '108': 108, 
			'109': 109, '110': 110, '111': 111, '112': 112, '113': 113, '114': 114, '115': 115, '116': 116, '117': 117, '118': 118, '119': 119, '120': 120, 
			'121': 121, '122': 122, '123': 123, '124': 124, '125': 125, '126': 126, '127': 127, '128': 128, 
			},
			'interval': {
				'1s': 1, '2s': 2, '5s': 5, '10s': 10, '15s': 15, '30s': 30, '1m': 1 * 60, '2m': 2 * 60, '4m': 4 * 60, '10m': 10 * 60, '20m': 20 * 60, '30m': 30 * 60,
			},
		},
	}

	// 计算参数
	function calcPara(change_model=false) {
		//判断url是否包含debug字符串
		var query = window.location.href;
		var isTest = query.indexOf('debug')

		// 获取型号
		var model = $('[name="model"]:checked').val();
		$('#controlModel label').removeClass('ui-btn-active');
		$('#' + model).siblings().addClass('ui-btn-active')
		console.log('model', $('#' + model))

		// 通道数
		var channel = $('[name="channel"]:checked').val();
		$('#controlChannel label').removeClass('ui-btn-active');
		$('#channel_' + channel).siblings().addClass('ui-btn-active')
		console.log('channel', $('#channel_' + channel))

		// 获取记录间隔
		var interval = $('[name="interval"]:checked').val();
		$('#controlInterval label').removeClass('ui-btn-active');
		$('#interval_' + interval).siblings().addClass('ui-btn-active')
		console.log('interval', $('#interval_' + interval))

		var message = ''
		message += '<li data-icon="false">型号：\t' + model_para[model]['name'] + '</li>\n';

		var memory = model_para[model]['memory']
		if(isTest !== -1){
			message += '<li data-icon="false">存储空间：\t' + (memory / 1024 / 1024).toFixed(0) + ' MB</li>\n';
		}

		var byte = model_para[model]['byte']
		if(isTest !== -1){
			message += '<li data-icon="false">存储格式：\t' + byte + ' Bytes</li>\n';
		}

		var max_channel = Object.keys(model_para[model]['channel']).length;
		if(isTest !== -1){
			message += '<li data-icon="false">最大通道数：\t' + max_channel + '</li>\n';
		}

		message += '<li data-icon="false">通道数：\t' + channel + '</li>\n';
		var channel_b = model_para[model]['channel'][channel]
		if(isTest !== -1){
			message += '<li data-icon="false">存储通道数：\t' + channel_b + '</li>\n';
		}

		message += '<li data-icon="false">记录间隔：\t' + interval + '秒</li>\n';
		message += '<br>'

		var time = memory / channel_b * interval / byte / 3600 / 24

		// 按通道固定时长的型号
		if ('time_ch' in model_para[model]) {
			time = model_para[model]['time_ch'][channel] * interval;  
		}

		if (time <= 30) {
			message += '<li data-icon="false">记录时长：\t' + time.toFixed(1) + '天</li>\n';
		}
		else if (30 < time && time <= 365) {
			message += '<li data-icon="false">记录时长：\t' + time.toFixed(0) + '天</li>\n';
		}
		else if (365 < time && time <= 3650) {
			time = time / 365;
			message += '<li data-icon="false">记录时长：\t' + time.toFixed(1) + '年</li>\n';
		}
		else {
			time = time / 365;
			message += '<li data-icon="false">记录时长：\t' + time.toFixed(0) + '年</li>\n';
		}

	    message += '</ul>\n';
		// 输出信息
	    document.getElementById("message").innerHTML=message;
	}
	
	function changeModel(){
		var model = $('[name="model"]:checked').val();

		inputChannel(model);
		inputInterval(model);
	}

	function inputModel(){
		var html = '';
		for(var p in model_para) {
			html += '<div class="ui-radio ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off" for="'+ p +'">'+ model_para[p]['name'] +'</label><input type="radio" name="model" id="'+ p +'" onchange="changeModel()" value="'+ p +'" ></div>'
		}
		$('#controlModel').html(html);
		$('#controlModel input:radio:first').click();
	}

	function inputChannel(model){
		var html = '';
		for(var p in model_para[model]['channel']) {
			html += '<div class="ui-radio ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off" for="channel_'+ p +'">'+ p +'</label><input type="radio" name="channel" id="channel_'+ p +'" onchange="calcPara()" value="'+ p +'" ></div>'
		}
		$('#controlChannel').html(html);
		$('#controlChannel input:radio:first').click();
	}

	function inputInterval(model){
		var html = '';
		for(var p in model_para[model]['interval']) {
			var t = model_para[model]['interval'][p]
			var n = p.replace('s', '秒').replace('m', '分').replace('h', '时')
			html += '<div class="ui-radio ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off" for="interval_'+ t +'">'+ n +'</label><input type="radio" name="interval" id="interval_'+ t +'" onchange="calcPara()" value="'+ t +'" ></div>'
		}
		$('#controlInterval').html(html);
		$('#controlInterval input:radio:first').click();
	}

	window.onload = function() {
	inputModel()
    document.getElementById("message").innerHTML = document.getElementById("message").innerHTML=
    	"<p>型号：</p>" +
	    "VX2300 = VX2300、VX2400<br>" +
		"VX6300 = VX5200、VX5300、VX6300<br>" +
		"M70 = M70、M80<br>"
		;
	};
	

</script>

<style>
.ui-input{
  float:left;
  width: 150px; 
}
.ui-input>div{
    display: inline-block;
    line-height: 26px;
    height: 26px;
}

.ui-lable{
   float:left;
   line-height:36px; 
   width: 50px; 
}

.ui-lable.ui-lable-left{
   line-height:36px;	
}

.ui-controlgroup-controls .ui-btn.ui-corner-all{
	border-right-width: 1px;
	margin-left: -1px;
}

</style>

</head>
<body>
    <div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<h1 id="header-device-detail">记录仪记录时长计算</h1>
			<a href="javascript:document.location='./flow.html'" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-back"></a>
		</div>

		<div data-role="main" class="ui-content">
		
		<form action="">
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend><b>型号</b>：</legend>
				<div id="controlModel"></div>
			</fieldset>

			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend><b>通道数</b>：</legend>
				<div id="controlChannel"></div>
			</fieldset>
			
			<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
				<legend><b>记录间隔</b>:</legend>
				<div id="controlInterval"></div>
			</fieldset>

		</form>
		<li data-role="fieldcontain">
			<div id="message">
				<p>计算存储时长</p>
			</div>
		</li>
	    </div>
	</div>
</body>
</html>